<template>
    <div class="head-wrap">
        <div class="head">
            <div class="head-title"><a>{{title}}</a></div>
            <nav>
                <ul class="head-nav">
                    <li :class="$route.name === item.name ? 'is-hover-li' : ''" v-if="!item.hidden" v-for="(item, index) in routes" :key="index" @click="navIndex = index">
                        <router-link class="router-link" :to="item.path" >
                            <div class="head-nav-icon"><span class="iconfont" :class="item.meta.icon"></span></div>
                            <div class="head-nav-content">{{item.meta.title}}</div>
                        </router-link>
                    </li>
                    <!-- 转跳写博客页面 -->
                    <li v-if="isLogin">
                        <router-link class="router-link" to="/writeBlog" >
                            <div class="head-nav-icon"><span class="iconfont icon-SVG-"></span></div>
                            <div class="head-nav-content">write</div>
                        </router-link>
                    </li>
                    <li>
                        <router-link class="router-link" to="/login" >
                            <div class="head-nav-icon"><span class="iconfont icon-SVG-"></span></div>
                            <div class="head-nav-content">假登录</div>
                        </router-link>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</template>

<script>
import {title} from '../../../globerConfig'
import { mapState } from 'vuex'
export default {
    name: 'Head',
    data() {
        return {
            title,
        }
    },
    computed: {
        ...mapState([
            'authList'
        ]),
        // 获取路由
        routes() {
            let routes = this.$router.options.routes;
            for(let i=0, len=routes.length; i<len;  i++) {
                if(routes[i].path === '/layout') {
                    return routes[i].children;
                }
            }
        },
        isLogin () {
            return this.$util.isLogin()
        }
    },
    created() {
        console.log(this.authList)
        // console.log(this.$route);
        // console.log(this.$router)
        // console.log(this.$router.options.routes);
    }
}
</script>

<style scoped>

.router-link {
    display: block;
}

.head-wrap {
    width: 100%;
}

.head {
    margin: 0 auto;
    padding: 100px 0 70px;
    width: 800px;
}

.head-title {
}

.head-title > a {
    padding: 4px 40px;
    background-color: #222;
    color: #fff;
    font-size: 20px;
    font-family:  fira code,Lato,pingfang sc,microsoft yahei,sans-serif;
}

.head-nav {
    margin: 20px 0;
}

.head-nav li {
    display: inline-block;
    margin: 0 15px;
    font-size: 14px;
    cursor: pointer;
}

.head-nav  li:hover {
    border-bottom: 1px solid #222;
}
.head-nav  li:hover > a {
    color: #222;
}

.is-hover-li.is-hover-li {
    border-bottom: 1px solid #222;

}
.is-hover-li.is-hover-li > a {
    color: #222;
}
</style>
